<script setup lang="ts">
import { ref } from "vue";
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
import CustomSlot from "./components/Slot.vue";
import ApiPlus from "./components/ApiPlus.vue";
import Lifecycle from "./components/Lifecycle.vue";
import ElePlus from "./components/ElementPlus.vue";
import VueUse from "./components/Vueuse.vue";
import Highlight from "./components/Highlight.vue";
import TestApi from "./components/Test.vue";
import TestJsx from './App'

import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
import H from './components/h.vue'

// import useBase64 from './hooks'

// useBase64({
//   el: '#img'
// }).then(res => {
//   console.log(res.baseUrl)
// })

const count = ref(0);
const change = (val: number) => {
  count.value += val;
};

const getParam = (v: string) => {
  console.log("父组件收到了子组件的数据", v)
}
</script>

<template>
  <div id="container">
    <!-- <p>count：{{ count }}</p>
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" @change="change" />
    <CustomSlot>
      <div>我被更新为新样式</div>
    </CustomSlot>
    <ApiPlus /> -->
    <!-- <Lifecycle /> -->
    <!-- <ElePlus />
    <VueUse />
    <Highlight /> -->
    <!-- <TestApi /> -->
    <img id="img" width="300" height="300" src="./assets/logo.png" alt="">
    <A name="杜丽" :age="18" />
    <B />
    <C />
    <H />
    <test-jsx name="哈喽" @change-param="getParam" />
    <router-view />
  </div>
</template>

<style scoped>
/* :global()伪类：全局选择器，让其中一个样式规则应用到全局 */
:global(.blue) {
  color: blue;
}
#container :deep(.world) {
  color: orange;
}
</style>
